<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Carousel Component Example - Insert Items &amp; Remove Items</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&2.6.0/build/container/container_core-min.js"></script> 
	<script type="text/javascript" src="scripts/carousel.js"></script>

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css">
	<link href="css/carousel.css" rel="stylesheet" type="text/css">
	<link href="css/yui.css" rel="stylesheet" type="text/css">	
<style type="text/css">
.carousel-component .carousel-list li { 
	margin:4px 4px 0px 4px;
}

.carousel-component .carousel-list li { 
	width:81px; /*75 + 2 + 2 + 1 + 1 */
}

.carousel-component .carousel-list li a { 
	display:block;
	border:2px solid #e2edfa;
	outline:none;
	-moz-outline:none; 
}

.carousel-component .carousel-list li a:hover { 
	border: 2px solid #87bf4e; 
}

.carousel-component .carousel-list li.active a { 
	border:2px solid #708fc7; 
}

.carousel-component .carousel-list li img { 
	border:1px solid #999;
	display:block; 
}

.carousel-component .carousel-list li strong { 
	display:block; 
}
									
#prev-arrow { 
	position:absolute;
	top:40px;
	z-index:3;
	cursor:pointer; 
	left:5px; 
}

#next-arrow { 
	position:absolute;
	top:40px;
	z-index:3;
	cursor:pointer; 
	right:5px; 
}
</style>
<script type="text/javascript">

// dummy data (images are randomly chosen from this array)
var imageList = [
				 "images/thumb_1.jpg",
				 "images/thumb_2.jpg",
				 "images/thumb_3.jpg",
				 "images/thumb_4.jpg",
				 "images/thumb_5.jpg",
				 "images/thumb_6.jpg",
				 "images/thumb_7.jpg",
				 "images/thumb_8.jpg",
				 "images/thumb_9.jpg",
				 "images/thumb_10.jpg",
				 "images/thumb_11.jpg",
				 "images/thumb_12.jpg",
				 "images/thumb_13.jpg",
				 "images/thumb_14.jpg",
				 "images/thumb_15.jpg",
				 "images/thumb_16.jpg",
				 "images/thumb_17.jpg",
				 "images/thumb_18.jpg"
				 ];
var imageNames = [
				"Image 1",
				"Image 2",
				"Image 3",
				"Image 4",
				"Image 5",
				"Image 6",
				"Image 7",
				"Image 8",
				"Image 9",
				"Image 10",
				"Image 11",
				"Image 12",
				"Image 13",
				"Image 14",
				"Image 15",
				"Image 16",
				"Image 17",
				"Image 18"
				];
				
var imageIndices = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];


var loadInitialItems = function(type, args) {

	var start = args[0];
	var last = args[1]; 

	load(this, start, last);	
};

var loadNextItems = function(type, args) {	

	var start = args[0];
	var last = args[1]; 
	var alreadyCached = args[2];
	
	if(!alreadyCached) {
		load(this, start, last);
	}
};

var loadPrevItems = function(type, args) {
	var start = args[0];
	var last = args[1]; 
	var alreadyCached = args[2];
	
	if(!alreadyCached) {
		load(this, start, last);
	}
};     

/**
 * To simulate out of synch loading, we load these items backwards.
 * This exercises the ability to load items out of sequence.
 */
var load = function(carousel, start, last) {

	for(var i=last; i>=start; i--) {
		if(!carousel.isItemLoaded(i)) {
		//carousel.debugMsg("adding item: " + i);
			carousel.addItem(i, 
				fmtItem(imageList[imageIndices[i-1]], "#",
							//"image" + i)); 
							imageNames[imageIndices[i-1]]));
		}
	}
};

var handlePrevButtonState = function(type, args) {

	var enabling = args[0];
	var leftImage = args[1];
	if(enabling) {
		leftImage.src = "images/left-enabled.gif";		
	} else {
		leftImage.src = "images/left-disabled.gif";	
	}
	
};

var handleNextButtonState = function(type, args) {

//this.debugMsg("handleNextButtonState");
	var enabling = args[0];
	var rightImage = args[1];
	if(enabling) {
		rightImage.src = "images/right-enabled.gif";	
	} else {
		rightImage.src = "images/right-disabled.gif";
	}
	
};
var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function() 
{
	carousel = new YAHOO.extension.Carousel("dhtml-carousel", 
		{
			numVisible:        4,
			animationSpeed:    0.3,
			animationMethod:   YAHOO.util.Easing.easeBoth,
			scrollInc:         3,
			navMargin:         40,
			size:              18,
			loadInitHandler:   loadInitialItems,
			prevElement:     "prev-arrow",
			nextElement:     "next-arrow",
			loadNextHandler:   loadNextItems,
			loadPrevHandler:   loadPrevItems,
			prevButtonStateHandler:   handlePrevButtonState,
			nextButtonStateHandler:   handleNextButtonState
		}
	);
};

YAHOO.util.Event.addListener(window, 'load', pageLoad);

var remove = function(e) {

	var indexInput = YAHOO.util.Dom.get("remove-item");
	if(indexInput.value === "") {
		YAHOO.util.Dom.get("status").innerHTML = 
					'<span style="color:red;">Please enter an index</span>'
		return;
	}
	
	var refIdx = parseInt(indexInput.value, 10);
	
	var removed = carousel.removeItem(refIdx, true);
	if(removed) updateIndicesForRemove(refIdx);
	
};
var insert = function(e, before) {
	
	var itemNameInput = YAHOO.util.Dom.get("itemName");
	var newName = itemNameInput.value;

	if(newName === "") {
		YAHOO.util.Dom.get("status").innerHTML = 
					'<span style="color:red;">Please enter a name</span>'
		return;
	}

	var indexInput = YAHOO.util.Dom.get("insertionIdx");
	if(indexInput.value === "") {
		YAHOO.util.Dom.get("status").innerHTML = 
					'<span style="color:red;">Please enter an index</span>'
		return;
	}
	
	var refIdx = parseInt(indexInput.value, 10);
	var ranIdx = Math.floor(Math.random()*18)
	var newImgUrl = imageList[ranIdx];

	if(before) {
		carousel.insertBefore(refIdx, fmtItem(newImgUrl, "#", newName));
		updateIndices(refIdx-1, ranIdx);
	} else {
		carousel.insertAfter(refIdx, fmtItem(newImgUrl, "#", newName));
		updateIndices(refIdx, ranIdx);
	}
	
	YAHOO.util.Dom.get("status").innerHTML = "(Item added)";
};

var updateIndices = function(insertIdx, ranIdx) {
	
	for(var i=imageIndices.length; i >= insertIdx; i--) {
		imageIndices[i] = imageIndices[i-1];
	}
	
	imageIndices[insertIdx] = ranIdx;
};
var updateIndicesForRemove = function(insertIdx) {
	
	var copiedIndices=[];
	
	for(var i= 0; i< insertIdx; i++) {
		copiedIndices[i] = imageIndices[i];
	}
	
	for(i = insertIdx; i < imageIndices.length-1; i++) {
		copiedIndices[i] = imageIndices[i+1];
	}
	
	imageIndices = copiedIndices;
	
	//imageIndices[imageIndices.length-1] = "UNDEFINED";
};

var fmtItem = function(imgUrl, url, title) {

  	var innerHTML = 
  		'<a href="' + 
  		url + 
  		'"><img src="' + 
  		imgUrl +
		'" width="' +
		75 +
		'" height="' +
		75+
		'"/>' + 
  		title + 
  		'<\/a>';
  
	return innerHTML;
	
}

YAHOO.util.Event.addListener("insert-after-button", 'click', insert, false);
YAHOO.util.Event.addListener("insert-before-button", 'click', insert, true);
YAHOO.util.Event.addListener("remove-button", 'click', remove);

</script>
</head>

<body>

<div id="doc" class="yui-t7">
   <div id="hd">
		<h1>Insert Items &amp; Remove Items - Carousel</h1>
   </div>
<div id="bd">
<p>Illustrates adding items to the carousel as well as removing items. Enter the name of the new item and which item index it will appear after.</p>

<!-- Carousel Structure -->
<div id="dhtml-carousel" class="carousel-component">
	<div><img id="prev-arrow" class="left-button-image" src="images/left-enabled.gif" alt="Previous Button"/></div>
	<div><img id="next-arrow" class="right-button-image" src="images/right-enabled.gif" alt="Next Button"/></div>
	<div class="carousel-clip-region">
		<ul class="carousel-list">
			<!-- Filled in via the loadInitHandler, loadNextHandler, and loadPrevHandler
			<li id="item-1">
			<a href="#">
				<img src="http://static.flickr.com/74/162582364_7fc3e2d60d_s.jpg"/>
			</a>Number One</li>
			-->
		</ul>
	</div>
</div>
<div>Also see the <a href="index.html">documentation</a></div>
<div>
<p style="float:left;">Insert item named:</p>
<input id="itemName" style="float:left;margin:10px;width:40px;" type="text"/>
<button id="insert-after-button" style="float:left;margin:10px;">Insert After</button>
<button id="insert-before-button" style="float:left;margin:10px;">Insert Before</button>
<p style="float:left;">item #:</p>
<input id="insertionIdx" style="float:left;margin:10px;width:40px;" type="text"/>
<span style="float:left;margin:10px;" id="status"></span>
</div>

<div style="clear:both;">
<p style="float:left;">Item # to remove:</p>
<input id="remove-item" style="float:left;margin:10px;width:40px;" type="text"/>
<button id="remove-button" style="float:left;margin:10px;">Remove</button>
</div>
<div  id="debug-area" style="clear:both;"></div>

</div>
</div> 

</body>
</html>